import React, { useState, useEffect } from 'react'
import './index.scss'
import classNames from 'classnames'
import { Layout } from 'antd'
const { Content } = Layout

const AnimatedSwitch = ({ animateKey = '', className, children }) => {
  const [show, setShow] = useState(false)

  useEffect(() => {
    setTimeout(() => setShow(true), 100)
    return () => {
      setShow(false)
    }
  }, [animateKey])

  return <Content className={classNames(className, 'fade fade-enter', { 'fade-enter-active': show })}>
    {children}
  </Content>
}

export default AnimatedSwitch